<style>
table.lo * { font-size: 12px; font-family: Trebuchet MS; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.login { width: 330px; }
table.lo td.register { width: 500px; padding-left: 5px; }
.pure_form_extra label, .pure_form_extra input { font-size: 12px !important; }
.pure_form_extra label * { font-size: 12px !important; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
.pure_form_extra { background: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 8px; font-size: 12px !important; }
</style>

<?php if (!isset($_SESSION['user'])) { ?>
<table class="lo" cellPadding="0" cellSpacing="0">
  <tr>
    <td class="login">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>登录</legend>
      
        <div class="pure-control-group">
          <label>邮箱</label>
          <input onkeyup="__login(event);" id="user" type="text" class="pure-input-1-2" placeholder="{email}" />
        </div>
        
        <div class="pure-control-group">
          <label>密码</label>
          <input onkeyup="__login(event);" id="pass" type="password" class="pure-input-1-2" placeholder="{password}" />
        </div>
        
        <div>
        <?php 
          if (isset($_SESSION['tried']) && $_SESSION['tried'] > 3) {
            require_once '../3rd_party/recaptcha/recaptchalib.php';
            echo recaptcha_get_html(RC_PUB);
          }
        ?>
        </div>
        
        <div class="pure-control-group">
          <label>&nbsp;</label>
          <button class="pure-button pure-input-1-2 pure-button-primary" onclick="login();">登录</button>
        </div>
      </div>
    </td>
    <td class="register">
      <div id="register" class="pure-form pure-form-aligned pure_form_extra">
        <legend>没有账号?<span style="font-size: 24px; font-weight: bold;">2</span>分钟注册</legend>
      
        <div class="pure-control-group">
          <label>邮箱<span class="mandatory">*</span></label>
          <input id="reg_user" type="text" class="pure-input-1-2" placeholder="{email}" />
        </div>
        
        <div class="pure-control-group">
          <label>密码<span class="mandatory">*</span></label>
          <input id="reg_pass" type="password" class="pure-input-1-2" placeholder="{password}" />
        </div>
        
        <div class="pure-control-group">
          <label>重输密码<span class="mandatory">*</span></label>
          <input id="reg_retype" type="password" class="pure-input-1-2" placeholder="{password}" />
        </div>
        
        <div class="pure-control-group">
          <label>姓名<span class="mandatory">*</span></label>
          <input id="reg_last" type="text" placeholder="{family name}" />
          <input id="reg_first" type="text" placeholder="{given name}" />
        </div>
        
        <div class="pure-control-group">
          <label>电话</label>
          <input id="reg_phone" type="text" class="pure-input-1-2" placeholder="{phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>&nbsp;</label>
          <button class="pure-button pure-input-1-2 pure-button-primary" onclick="register();">注册</button>
        </div>
      </div>
      <div>&nbsp;</div>
      <div id="forget" class="pure-form pure-form-aligned pure_form_extra">
        <legend>忘记密码了？</legend>
      
        <div class="pure-control-group">
          <label>邮箱</label>
          <input id="forget_user" type="text" class="pure-input-1-2" placeholder="{email}" />
        </div>
        
        <div class="pure-control-group">
          <label>&nbsp;</label>
          <button class="pure-button pure-input-1-2 pure-button-primary" onclick="reset();">重置</button>
        </div>
      </div>
    </td>
  </tr>
</table>

<script type="text/javascript">
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __url = '<?php echo ($app_data->param_url == '') ? URL . HOME_DIR . $app_data->sys->php_name . '.php' : $app_data->param_url; ?>';
  var __err = '<?php echo ((isset($_SESSION['login_err'])) ? $_SESSION['login_err'] : ''); ?>';
  var __tried = <?php echo ((isset($_SESSION['tried'])) ? $_SESSION['tried'] : 0); ?>
  
  $(function(){
    if (__err != '') {
      if (window.__n) {
        window.__n.close();
      }
      window.__n = $(".cs_header").noty( {
        text : __err,
        type : 'error'
      });
    }
    if ($('#recaptcha_response_field').length > 0) {
      $('#recaptcha_response_field')[0].onkeyup = __login;
    }
  });
  
  function __login(ev) {
    if(ev.which == 13) {
      login();
    }
  };
  
  function reset() {
    var req = {
      user: $('#forget_user').val(),
      __id: __id
    };
    Ajax.request(
      __requrl + 'reset',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        $('#forget').empty();
        $('#forget').append('重置密码的邮件已经发送到' + rslt.account);
      },
      null
    );
  };
  
  function login() {
    var req = {
      user: $('#user').val(),
      pass: $('#pass').val(),
    };
    if (__tried > 3) {
      req.recaptcha_challenge_field = $('#recaptcha_challenge_field').val();
      req.recaptcha_response_field = $('#recaptcha_response_field').val();
    }
    Ajax.request(
      __requrl + 'login',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        if (!rslt.err) {
          $.blockUI({ message: '<div style="font-size: 12px; padding: 5px 0; font-weight: bold;">登陆成功，转入页面...</div>' });
          if (parent != window) {
            parent.location.href = __url;
          } else {
            location.href = __url;
          }
        } else {
          if (rslt.tried > 3) {
            if (parent != window) {
              parent.location.reload();
            } else {
              location.reload();
            }
          } else {
            if (window.__n) {
              window.__n.close();
            }
            window.__n = $(".cs_header").noty( {
              text : rslt.err,
              type : 'error'
            });
          }
        } 
      },
      null
    );
  };

  function register() {
    var req = {
      user: $('#reg_user').val(),
      pass: $('#reg_pass').val(),
      retype: $('#reg_retype').val(),
      first: $('#reg_first').val(),
      last: $('#reg_last').val(),
      phone: $('#reg_phone').val(),
      __id: __id
    };
    Ajax.request(
      __requrl + 'register',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        $('#register').empty();
        $('#register').append('激活邮件已经发送到' + rslt.account + ', 赶紧去激活账号吧！');
      },
      null
    );
  };
</script>
<?php } else { ?>
<div class="pure-form pure-form-aligned pure_form_extra">已登录, 跳转页面...</div>
<script type="text/javascript">
var __url = '<?php echo ($app_data->param_url == '') ? URL . HOME_DIR : $app_data->param_url; ?>';
if (parent != window) {
  parent.location.href = __url;
} else {
  location.href = __url;
}
</script>
<?php } ?>